<template>
  <div class="team_center">
    <div class="team_card" v-for="project in projectList" :key="project.p_id">
      <div class="tc_photo">
        <img src="../../assets/img/logo.png" alt="" />
        <span>{{ project.s_name }}</span>
      </div>
      <div>
        <ul class="tc_mes">
          <li>
            项目名称：<span>{{ project.p_title }}</span>
          </li>
          <li>
            指导老师：<span>{{ project.t_name }}</span>
          </li>
          <li>
            所需时间：<span>{{ project.p_time }}</span>
          </li>
          <li>
            项目难度：<span>{{ project.p_dif }}</span>
          </li>
          <li>审批状态：<span>待审批</span></li>
          <li>申请学生：<span>{{ project.s_name }}</span></li>
          <li>
            所需人数：<span>{{ project.p_peopleNum }}</span>
          </li>
        </ul>
      </div>
      <div>
        <el-button
          size="small "
          type="success"
          round
          @click="projectParticulars(project.p_id)"
          >了解详情</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      projectList: [],
      dialogFormVisible: false,
      leaveWordTo: -1,
      form: {
        leaveWord: "",
      },
      openTime:''
    };
  },
  name: "teamCenter",
  mounted() {
    this.openTime=new Date().getTime()
    this.getDataList()
  },
  methods: {
    getDataList() {
      var token = localStorage.getItem("token");
      var e_id = token.substring(1, token.length - 1).split("#")[1] * 1;
      axios.post(`http://localhost:3000/expert/overPending`,{e_id}).then((ret) => {
        this.projectList = ret.data.dataList;
      });
    },
    projectParticulars(id) {
      this.$router.push({ path: "/Expert/eProject", query: {p_id: id } });
    },
  },
};
</script>

<style scoped>
.team_center {
  padding: 20px;
}
.team_card {
  width: 85%;
  height: 100px;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
  border: 1xp solid #ddd;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
  border-left: 2px solid rgba(255, 255, 255, 0.5);
  border-top: 2px solid rgba(255, 255, 255, 0.5);
}
.tc_photo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tc_photo > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #40c9c6;
}
.tc_mes {
  width: 600px;
  margin-left: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.tc_mes > li {
  width: 33%;
  font-size: 14px;
  color: #606266;
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.tc_mes > li > span {
  padding: 0 5px;
}
.tc_mes > li:first-of-type {
  width: 100%;
  color: #303133;
  font: 18px/24px "";
  margin-bottom: 10px;
}
.downBtn a{
  display: block;
  color: white;
  text-align: center;
}
</style>
